<template>
  <div class="b_good">
    <div class="desTitle" v-if="isLoc" style="margin-left: 1.4rem">附近的店铺</div>
    <div class="list" v-for="(items, index) in list" :key="index" @click="to_self_bartending_store(items)">
      <div class="lis">
        <div class="lis_img">
          <img :src="items.logo_url" alt="" />
        </div>
        <div class="lis_right">
          <div class="lis_right_title">{{ items.name }}</div>
          <div class="score-box">
            <span class="orderTotal">已售{{ items.sales }}单</span>
          </div>
          <div class="category-list" v-if="items.has_many_cate.length">
            <div class="classify" v-for="(citem, cindex) in items.has_many_cate" :key="cindex" v-if="cindex < 3">
              <span>{{ citem.name }}</span>
            </div>
          </div>
          <div class="discounts-distance">
            <div class="dispatch-box" style="padding: 0; color: #00001c">
              <template>{{ items.full_address }}</template>
            </div>
            <div class="score-right">{{ items.distance }}<i class="iconfont icon-all_daohang"></i></div>
          </div>
          <div class="dispatch-boxa" style="overflow-x: auto">
            <div v-for="dispatch in items.dispatch_arr" class="dispatch-item" :key="dispatch" style="flex-shrink: 0">{{ dispatch }}</div>
          </div>
          <div class="discount-box">
            <div class="discount-item" v-if="items.has_many_coupon && items.has_many_coupon.length > 0">
              <span class="red">优惠</span>
              <div class="con-list">
                <span style="margin-left: 0.5rem" v-for="(coupon, index) in items.has_many_coupon" :key="index" v-if="index <= 2">{{ coupon.name }}</span>
              </div>
            </div>
            <!-- <template v-if="items.store_point">
              <div class="discount-item" v-if="items.store_point.point_switch != 0 || items.store_love.award == 1">
                <span class="red">赠送</span>
                <div class="con-list">
                  <span style="margin-left: 0.5rem;" v-if="items.store_point.point_switch == 0 ? false : true">{{ items.store_point.point }}</span>
                  <span style="margin-left: 0.5rem;" v-if="items.store_love.award == 1 ? true : false">{{ items.store_love.award_proportion }}</span>
                </div>
              </div>
              <div class="discount-item" v-if="items.store_point.point_deduct_switch != 0 || items.store_love.deduction == 1">
                <span class="red">{{ items.goods_show && items.goods_show.search_class_name ? items.goods_show.search_class_name : "抵扣" }}</span>
                <div class="con-list">
                  <span style="margin-left: 0.5rem;" v-if="items.store_love.deduction == 1 ? true : false">{{ items.store_love.deduction_proportion }}</span>
                  <span
                    style="margin-left: 0.5rem;"
                    :class="{ store_deduction_style: items.goods_show && items.goods_show.store_deduction_style }"
                    v-if="items.store_point.point_deduct_switch == 0 ? false : true"
                    >{{ items.store_point.max_point_deduct }}</span
                  >
                  <span style="margin-left: 0.5rem;" class="store_cash_back_style" v-if="items.store_point.commission_deduct && items.goods_show.store_cash_back">{{
                    items.store_point.commission_deduct
                  }}</span>
                </div>
              </div>
            </template> -->
            <!-- <div class="discount-item" v-if="items.store_full_reduction && items.store_full_reduction.length != 0">
              <span class="red">满减</span>
              <div class="con-list">
                <span style="margin-left: 0.5rem;" v-for="(reduction, index) in items.store_full_reduction" :key="index" v-if="index <= 2">{{ reduction }}</span>
              </div>
            </div> -->
            <!-- <p class="discount-item" v-if="items.store_full_package">
              <span class="red">包邮</span>
              <span style="margin-left: 0.5rem;">{{ items.store_full_package }}</span>
            </p> -->
            <!-- <p class="discount-item" v-if="items.store_love && items.store_love.activation">
              <span class="red">赠送</span>
              <span style="margin-left: 0.5rem;">{{ items.store_love.activation_proportion }}</span>
            </p> -->
            <!-- <p class="discount-item" v-if="items.store_love_bonus_pool && items.store_love_bonus_pool.give_quota">
              <span class="red">赠送</span>
              <span style="margin-left: 0.5rem;">{{ items.store_love_bonus_pool.quota_rate }}</span>
            </p> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isLoc: {
      type: Boolean,
      default: true
    },
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    to_self_bartending_store(item) {
      this.$router.push(this.fun.getUrl("self_bartending_store", { store_id: item.id }));
    }
  }
};
</script>
<style lang="scss" scoped>
.desTitle {
  font-weight: bold;
  font-size: 1.06rem;
  color: #00001c;
  margin-left: 0.75rem;
  text-align: left;
  margin-bottom: 0.81rem;
  margin-top: 0.25rem;
}
.list {
  margin: 0 0.75rem;
  margin-bottom: 0.75rem;
  .lis {
    background: #ffffff;
    border-radius: 0.5rem;
    padding: 0.75rem;
    box-sizing: border-box;
    display: flex;
    .lis_right {
      flex: 1;
      text-align: left;
      .lis_right_title {
        font-weight: bold;
        font-size: 1.06rem;
        color: #00001c;
        margin-bottom: 0.53rem;
      }
      .score-box {
        display: flex;
        align-items: center;
        font-size: 0.75rem;
        color: #f96d20;
        .orderTotal {
          color: #000;
          // margin-left: 0.5rem;
        }
      }
      .category-list {
        margin-top: 0.59rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;

        .classify {
          display: flex;
          align-items: center;
          justify-content: center;
          background: #fff0e8;
          border-radius: 0.25rem;
          font-size: 0.69rem;
          color: #f96d20;
          margin-right: 0.5rem;
          padding: 0.22rem 0.28rem;
          box-sizing: border-box;
        }
      }
      .discounts-distance {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        margin-top: 0.2rem;

        .score-right {
          color: #00001c;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-left: 0.2rem;

          i {
            font-size: 25px;
            color: #f15353;
          }
        }

        .dispatch-box {
          display: flex;
          flex-wrap: wrap;
        }
      }
      .dispatch-boxa {
        display: flex;
        padding: 0.3rem 0 0.5rem 0;

        .dispatch-item {
          margin-right: 0.4rem;
          padding: 0.1rem 0.3rem;
          color: #00001c;
          border-radius: 0.25rem;
          border: solid 0.025rem #d6d6dc;
        }
      }
      .discount-box {
        display: flex;
        flex-direction: column;

        .red {
          // color: #ff2c29;
          font-weight: 400;
          white-space: nowrap;
        }

        .discount-item {
          margin-bottom: 0.2rem;
          color: #f15353;
          display: flex;
          align-items: flex-start;

          .con-list {
            display: flex;
            flex-wrap: wrap;
            font-weight: 500;
          }
        }
      }
    }
    .lis_img {
      width: 4.5rem;
      height: 4.5rem;
      background: #c19b7f;
      border-radius: 0.5rem;
      margin-right: 0.38rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.5rem;
      }
    }
  }
}
</style>
